<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>易果生鲜Yiguo网</title>
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/jquery/jquery-1.11.3.js"></script>
	</head>
	<body>
		<div id="comTop">
			<script>
				$("#comTop").load("header.html")
			</script>
		</div>	
		<!--banner-->
		<div class="banner">
			<ul class="img-list" >				
			</ul>
			<ul class="banner-nav-list" >
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<div class="btn">
				<div class="toLeft"></div>
				<div class="toRight"></div>
			</div>								
		</div>
		<!--case-->
		<div class="case">
			<div class="caseNew">
				<div class="caseCon">
					<h2>新品专区</h2>
					<p>探访源头产地 臻选当地时鲜</p>
				</div>
			</div>
			<div class="caseNew">
				<div class="caseCon">
					<h2>优质生活</h2>
					<p>没事有态度 生活更有味</p>
				</div>
			</div>
			<div class="caseNew">
				<div class="caseCon">
					<h2>银行专区</h2>
					<p>银行卡专享 超值实惠</p>
				</div>
			</div>
			<div class="caseNew">
				<div class="caseCon">
					<h2>菜谱专栏</h2>
					<p>大厨私房菜 餐桌新食尚</p>
				</div>
			</div>
		</div>
		<!--floor-->
		<div class="floor">
			<div class="firstFloor">
				<div class="f1">
					<a href="">
						<p>F1</p>
						<h2>进口水果</h2>
					</a>
					<ul>
						<li>
							<a href="">进口苹果</a>
						</li>
						<li>
							<a href="">佳沛专区</a>
						</li>
						<li>
							<a href="">泰国鲜果</a>
						</li>
					</ul>
								
				</div>
				<div class="f1Con">
					<div class="section">				
					</div>
					<ul></ul>
				</div>
			</div>
			<div class="secondFloor">
				<div class="f1">
					<a href="">
						<p>F2</p>
						<h2>国产水果</h2>
					</a>
					<ul>
						<li>
							<a href="">果味四川</a>
						</li>
						<li>
							<a href="">秋日梨享</a>
						</li>
						<li>
							<a href="">甜蜜柚惑</a>
						</li>
					</ul>
								
				</div>
				<div class="f1Con">
					<div class="section">				
					</div>
					<ul></ul>
				</div>
			</div>
			<div class="threeFloor">
				<div class="f1">
					<a href="">
						<p>F3</p>
						<h2>新鲜蔬菜</h2>
					</a>
					<ul>
						<li>
							<a href="">沙拉菜</a>
						</li>
						<li>
							<a href="">人气粗粮</a>
						</li>
						<li>
							<a href="">萝卜派对</a>
						</li>
					</ul>
								
				</div>
				<div class="f1Con">
					<div class="section">				
					</div>
					<ul></ul>
				</div>
			</div>
			<div class="fourFloor">
				<div class="f1">
					<a href="">
						<p>F4</p>
						<h2>海鲜水产</h2>
					</a>
					<ul>
						<li>
							<a href="">刺身专区</a>
						</li>
						<li>
							<a href="">东海水产</a>
						</li>
						<li>
							<a href="">海产干货</a>
						</li>
					</ul>								
				</div>
				<div class="f1Con">
					<div class="section">				
					</div>
					<ul></ul>
				</div>
			</div>
			
			<div class="fifthFloor">
				<div class="f1">
					<a href="">
						<p>F5</p>
						<h2>精选肉类</h2>
					</a>
					<ul>
						<li>
							<a href="">欧洲天然猪肉</a>
						</li>
						<li>
							<a href="">澳洲牛肉</a>
						</li>
						<li>
							<a href="">肉类制品</a>
						</li>
					</ul>
				</div>
				<div class="f5Con">
					<div class="leftCon">											
					</div>
					<div class="middleCon">
						<div></div>
						<ul></ul>
						<ul>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
						</ul>
					</div>					
					<div class="rightCon">	
					</div>
				</div>
			</div>	
			<div class="sixFloor">
				<div class="f1">
					<a href="">
						<p>F6</p>
						<h2>禽类蛋品</h2>
					</a>
					<ul>
						<li>
							<a href="">原味蒸品</a>
						</li>
						<li>
							<a href="">原汁煲汤</a>
						</li>
						<li>
							<a href="">禽类分割品</a>
						</li>
					</ul>
				</div>
				<div class="f5Con">
					<div class="leftCon">											
					</div>
					<div class="middleCon">
						<div></div>
						<ul></ul>
						<ul>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
						</ul>
					</div>					
					<div class="rightCon">	
					</div>
				</div>
			</div>	
			<div class="sevenFloor">
				<div class="f1">
					<a href="">
						<p>F7</p>
						<h2>粮油杂货</h2>
					</a>
					<ul>
						<li>
							<a href="">有机面食</a>
						</li>
						<li>
							<a href="">泰国名酱</a>
						</li>
						<li>
							<a href="">葵花籽油</a>
						</li>
					</ul>
				</div>
				<div class="f5Con">
					<div class="leftCon">											
					</div>
					<div class="middleCon">
						<div></div>
						<ul id="midpic">
							<li></li>
							<li></li>
						</ul>
						<ul>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
						</ul>
					</div>					
					<div class="rightCon">						
					</div>
				</div>
			</div>	
			<div class="eightFloor">
				<div class="f1">
					<a href="">
						<p>F8</p>
						<h2>乳类糕点</h2>
					</a>
					<ul>
						<li>
							<a href="">味全</a>
						</li>
						<li>
							<a href="">蛋糕名录</a>
						</li>
						<li>
							<a href="">try me 小蛋糕</a>
						</li>
					</ul>
				</div>
				<div class="f5Con">
					<div class="leftCon">											
					</div>
					<div class="middleCon">
						<div></div>
						<ul></ul>
						<ul>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
						</ul>
					</div>					
					<div class="rightCon">	
					</div>
				</div>
			</div>	
			<div class="nineFloor">
				<div class="f1">
					<a href="">
						<p>F9</p>
						<h2>饮料酒水</h2>
					</a>
					<ul>
						<li>
							<a href="">饮用水</a>
						</li>
						<li>
							<a href="">冲调品</a>
						</li>
						<li>
							<a href="">贝纳颂</a>
						</li>
					</ul>
				</div>
				<div class="f5Con">
					<div class="leftCon">						
					</div>
					<div class="middleCon">
						<div></div>
						<ul id="midpic">
							<li>
								<a href="">
									<img src="" alt="" />
								</a>
							</li>
							<li>
								<a href="">
									<img src="" alt="" />
								</a>
							</li>
						</ul>
						<ul>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
						</ul>
					</div>					
					<div class="rightCon">						
					</div>
				</div>
			</div>	
			<div class="tenFloor">
				<div class="f1">
					<a href="">
						<p>F10</p>
						<h2>方便速食</h2>
					</a>
					<ul>
						<li>
							<a href="">避风塘</a>
						</li>
						<li>
							<a href="">湾仔码头</a>
						</li>
						<li>
							<a href="">凤品</a>
						</li>
					</ul>
				</div>
				<div class="f5Con">
					<div class="leftCon">											
					</div>
					<div class="middleCon">
						<div></div>
						<ul></ul>
						<ul>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/f5_conmd.jpg" alt="" />
								</a>
							</li>
						</ul>
					</div>					
					<div class="rightCon">	
					</div>
				</div>
			</div>	
		</div>
		<!--combottom-->
		<div id="comBom">
			<script>
				$("#comBom").load("footer.html")
			</script>
		</div>
		<!--leftside-->
		<div class="leftSide" id="leftSide" style="display:none">
			<ul>
				<li>
					<span class="active">进口水果</span>
				</li>
				<li>
					<span class="active">国产水果</span>
				</li>
				<li>
					<span class="active">新鲜蔬菜</span>
				</li>
				<li>
					<span class="active">海鲜水产</span>
				</li>
				<li>
					<span class="active">精选肉类</span>
				</li>
				<li>
					<span class="active">禽类蛋品</span>
				</li>
				<li>
					<span class="active">粮油杂货</span>
				</li>
				<li>
					<span class="active">乳类糕点</span>
				</li>
				<li>
					<span class="active">饮料酒水</span>
				</li>
				<li>
					<span class="active">方便速食</span>
				</li>
				<li class="last">
					TOP
				</li>
			</ul>
		</div>
	</body>
<script src="js/require.js" data-main="js/index.js"></script>
<script src="js/scrollimg.js"></script>
<script src="js/select.js"></script>
<script>
	//轮播图及请求图片
	new ImgScroll();
	$(function($){
		$.ajax({
			url:"scroll_img.json",
			success:function(res){
				var arr=res;
				var str="";
				for(var i in arr){
					str+=`	<li>
						  		<img src="img/${arr[i].src}" alt="" />
						 	</li>`
				}
				$(".banner .img-list").html(str)
			}
		})				
	})
	//楼层请求数据传入图片；
	$(function($){
		$.ajax({
			url:"shop_img.json",
			success:function(res){
				
				var shopArr=res;
				var leftStr="";
				var lcount=0;
				//前四楼的数据
				for(var i=0;i<4;i++){
					//左侧图
					leftStr=` 	<a href="">
									<img src="img/${shopArr[lcount].leftSrc}" alt="" />
								</a>`
					$(".floor>div").eq(lcount).find(".section").html(leftStr);
					//右侧图
					var midStr="";					
					for(var j=0;j<6;j++){ 							
							midStr+=` 	<li>								
											<a href="">
												<img src="img/${shopArr[lcount].rightSrc[j]}" alt="" />
											</a>
										</li>`							
					}
					$(".floor>div").eq(lcount).find(".f1Con").find("ul").html(midStr);
					lcount++;
				}
				
				//后六楼数据
				for(var i=4;i<10;i++){
					//左侧图
					leftStr=` 	<a href="">
									<img src="img/${shopArr[lcount].leftSrc}" alt="" />
								</a>`
					$(".floor>div").eq(lcount).find(".leftCon").html(leftStr);
					
					//中间下面图
					midStr=` 	<a href="">
									<img src="img/${shopArr[lcount].midSrc[0]}" alt="" />
								</a>`
					$(".floor>div").eq(lcount).find(".middleCon>div").html(midStr);
					
					//右侧图
					rightStr=` 	<a href="">
									<img src="img/${shopArr[lcount].rightSrc}" alt="" />
								</a>`
					$(".floor>div").eq(lcount).find(".rightCon").html(rightStr);
					
					//中间图片数据
					var midStr="";
					var str="";
					//七楼和九楼
					if(lcount==6||lcount==8){
						for(var j=0;j<2;j++){
							str+=` 	<li>								
										<a href="">
											<img src="img/${shopArr[lcount].midSrc[j+1]}" alt="" />
										</a>
									</li>`
						}
						$(".floor>div").eq(lcount).find(".f5Con").find("ul:eq(0)").html(str);
					}else{//5 6 8 10楼
						for(var j=0;j<4;j++){
							midStr+=` 	<li>								
											<a href="">
												<img src="img/${shopArr[lcount].midSrc[j+1]}" alt="" />
											</a>
										</li>`
						}
						$(".floor>div").eq(lcount).find(".f5Con").find("ul:eq(0)").html(midStr);						
					}				
					lcount++;
				}	
			}
		})
	})
	
</script>